<template>
  <!--
    // table 表格数据内容
    //tableData  [] -- 数组形式

    // 表格标签
    // tableLabel [{prop:xxx,label:xxxx}] -- 数组包含对象
        prop  逻辑操作 标签名
        label 中文显示 标签名

    //table 表格配置对象
    // tableConfig
        是否加载动画
        isShowLoading: true,
        改造状态列显示效果 el-switch
        alterState: 'state',

        当前页
        page: 1,
        总条目数
        total: 30,
        加载动画
        loading: false,

  -->

  <div class="common-table">
    <!-- 表格 -->
    <el-table :data="tableData"
              height="90%"
              style="width: 100%"
              :border="true"
              highlight-current-row
              v-loading="tableConfig.loading"
              :row-key="tableConfig.rowKey || 'id'"
              default-expand-all
              @selection-change="handleSelectionChange"
              :tree-props="{ children: 'children', hasChildren: true }">
      >
      <el-table-column align="center"
                       v-if="tableConfig.selection"
                       type="selection"
                       width="50">
      </el-table-column>

      <!-- <el-table-column align="center"
                       label="序号"
                       width="105">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column> -->
      <!-- 表格循环 -->
      <template v-for="item in tableLabel">
        <!-- id -->
        <el-table-column align="center"
                         v-if="item.type == 'id'"
                         show-overflow-tooltip
                         :key="item.id"
                         :label="item.label"
                         :prop="item.prop"
                         fixed
                         :sortable="item.prop == 'id' ? true : false"></el-table-column>
        <!-- 名称 -->
        <el-table-column align="center"
                         v-if="!item.type"
                         :width="item.width"
                         show-overflow-tooltip
                         :key="item.id"
                         :label="item.label"
                         :prop="item.prop">
        </el-table-column>


        <!-- switch 开关 -->
        <el-table-column align="center"
                         v-if="item.type == 'state'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
                         width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state "
                       :active-value="1"
                       :inactive-value="0"
                       active-color="#13ce66"
                       inactive-color="#DCDFE6"
                       @change="changeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>


        <!-- radio 单选框  -->
        <el-table-column align="center"
                         v-if="item.type == 'radio'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
                         :width="item.width || 30">
          <template slot-scope="scope">
            <el-radio v-model="scope.row.prop"
                      :label="1">{{}}</el-radio>
            <el-radio v-model="scope.row.prop"
                      :label="2">{{}}</el-radio>
          </template>
        </el-table-column>

        <!-- 下拉框 -->
        <el-table-column align="center"
                         v-if="item.type == 'select'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
                         :width="item.width || 30">
          <template slot-scope="scope">
            <el-select v-model="scope.row[item.prop]"
                       size="mini"
                       :placeholder="'请选择'+item.label">
              <el-option v-for="selectItem in item.options"
                         :key="selectItem.value"
                         :label="selectItem.label"
                         :value="selectItem.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>

        <!-- 输入框 -->
        <el-table-column align="center"
                         v-if="item.type == 'input'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
                         :width="item.width || 120">
          <template slot-scope="scope">
            <el-input v-model="scope.row[item.prop]"
                      :placeholder="'请输入' + item.label"
                      size="mini"
                      @blur="blurInput(scope.row[item.prop])"></el-input>
          </template>
        </el-table-column>

        <!-- 日期选择器框 -->
        <el-table-column align="center"
                         v-if="item.type == 'datePicker'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
                         :width="item.width || 180"
                         :sortable="true">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row[item.prop]"
                            type="date"
                            format="yyyy-MM-dd"
                            size="mini"
                            placeholder="选择日期">
            </el-date-picker>
            <span class="date-tip">{{dateFormatWeek(scope.row[item.prop])}}</span>
          </template>
        </el-table-column>

        <!-- 显示日期  时间戳 to yyyy-mm-dd -->
        <el-table-column align="center"
                         v-if="item.type == 'dateTime'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label">
          <template slot-scope="scope">
            {{dateFormatDeal(scope.row.last_date)}}
          </template>
        </el-table-column>

        <!-- 性别 判断 -->
        <el-table-column align="center"
                         v-if="item.type == 'sex'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
<!--        状态判断-->
        <el-table-column align="center"
                         v-if="item.type == 'equipmentState'"
                         show-overflow-tooltip
                         :key="item.prop"
                         :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag :type="state_judgment(scope.row[item.prop])"  >
              {{scope.row[item.prop] == '0' ?'离线':scope.row[item.prop]=='1'?'在线':'警告' }}
            </el-tag>
          </template>
        </el-table-column>
<!--        值0或1的转换-->
        <el-table-column align="center"
                         v-if="item.type =='dualJudgment'"
                        show-overflow-tooltip
                        :key="item.prop"
                        :label="item.label"
        >
          <div slot-scope="scope">
            {{scope.row[item.prop]=='1'?item.trueType:item.falseType}}
          </div>
        </el-table-column>
        <el-table-column  align="center"
                          v-if="item.type =='money'"
                          show-overflow-tooltip
                          :key="item.prop"
                          :label="item.label"
        >
          <div slot-scope="scope">{{`￥${scope.row[item.prop]}`}}</div>
        </el-table-column>
      </template>

      <!-- 操作 -->
      <slot name="operation"></slot>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-if="tableConfig.isShowLoading"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   :total="tableConfig.total"
                   :page-size="tableConfig.size"
                   :current-page.sync="tableConfig.page"></el-pagination>

  </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    tableLabel: Array,
    tableConfig: Object,
  },
  data () {
    return {
    }
  },
  beforeCreate () {
  },
  created () {
  },
  beforeMount () {
  },
  mounted () {
  },
  updated () {
  },
  computed: {
  },
  watch: {
  },
  filters: {
  },
  methods: {
    dateFormatWeek (date) {
      const week = new Date(date).getDay();
      let weekConfig = '';
      switch (week) {
        case 0:
          weekConfig = '周日'
          break;
        case 1:
          weekConfig = '周一'
          break;
        case 2:
          weekConfig = '周二'
          break;
        case 3:
          weekConfig = '周三'
          break;
        case 4:
          weekConfig = '周四'
          break;
        case 5:
          weekConfig = '周五'
          break;
        case 6:
          weekConfig = '周六'
          break;
        default:
          console.log('xx');
          break;
      }
      return weekConfig;
    },

    dateFormatDeal (time) {
      if (time == 0) {
        return '无'
      }
      const date = new Date(time * 1000);
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
    },
    state_judgment(state){
      let type =''
      switch (state){
        case '0':type='info';
        break;
        case '1':type='success';
        break;
        case '2':type='danger';
        break;
      }
      return type;
    },
    //开关按钮
    changeSwitch (row) {
      this.$emit('changeSwitch', row)
    },
    //失去焦点 自动保存
    blurInput (val) {
      this.$emit('blurInput', val)
    },
    //表格选中事件
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    //pageSize 改变时会触发
    sizeChange(val) {
      this.tableConfig.size = val
      this.$emit('sizeChange')
    },
    //currentPage 改变时会触发
    currentChange() {
      this.$emit('currentPage')
    }
  }
}
</script>

<style lang="scss" scoped>
.common-table {
  position: relative;
  height: 100%;

  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px; // 横向滚动条
    height: 6px; // 纵向滚动条 必写
  }

  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 3px;
  }

  .el-pagination {
    float: right;
    margin-right: 25px;
  }
  .image {
    width: 60px;
    height: 40px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .date-tip {
    font-weight: bold;
    display: block;
    margin-left: 3px;
  }
}
</style>
